<template>
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="200px" size="medium">
            <el-form-item label="保司名称" prop="safeName">
                <el-input type="text" v-model.trim="ruleForm.safeName" class="w300"></el-input>
            </el-form-item>
            <el-form-item label="奖励金结算单价" prop="bouns">
                <el-input type="text" v-model="ruleForm.bouns" class="w300"><template slot="append">元</template></el-input>
            </el-form-item>
            <el-form-item label="渠道结算费率" prop="totalC">
                <el-input type="text" v-model="ruleForm.totalC" class="w300"><template slot="append">%</template></el-input>
            </el-form-item>
            <el-form-item label="技术服务费率" prop="telServiceC">
                <el-input type="text" v-model="ruleForm.telServiceC" class="w300"><template slot="append">%</template></el-input>
            </el-form-item>
            <el-form-item :label="ruleForm.spareField1" prop="spareField2" v-show="ruleForm.spareField1 && ruleForm.spareField1 !==''">
                <el-input type="text" v-model="ruleForm.spareField2" class="w300"><template slot="append">%</template></el-input>
            </el-form-item>
            <el-form-item :label="ruleForm.spareField3" prop="spareField4" v-show="ruleForm.spareField3 && ruleForm.spareField3 !==''">
                <el-input type="text" v-model="ruleForm.spareField4" class="w300"><template slot="append">%</template></el-input>
            </el-form-item>
            <el-form-item :label="ruleForm.spareField5" prop="spareField6" v-show="ruleForm.spareField5 && ruleForm.spareField5 !==''">
                <el-input type="text" v-model="ruleForm.spareField6" class="w300"><template slot="append">%</template></el-input>
            </el-form-item>
            <el-form-item label="是否生效" prop="isUse">
                <el-select v-model="ruleForm.isUse" class="w300">
                    <el-option v-for="item in cOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
                <el-button @click="onCancel()">取 消</el-button>
            </el-form-item>
        </el-form>
</template>

<script>
	export default {
        name: 'editSettlement',
		data () {
			return {
                cOptions: [
                    { value: '生效', label: '生效' },
                    { value: '未生效', label: '未生效' }
                ],
                flag : false,
                ruleForm: {
                    safeName: '',
                    bouns: 0,
                    totalC: 0,
                    telServiceC: 0
                },
                rules: {
                    safeName: [
                        { required: true, message: '请输入保司名称', trigger: 'blur' }
                    ],
                    isUse: [
                        { required: true, message: '请选择是否生效', trigger: 'change' }
                    ],
                    // bouns: [
                    //     { required: true, type: 'number', message: '请输入奖励金结算单价', trigger: 'blur' }
                    // ]
                }
            }
		},
		created () {
            if (this.$state.query && this.$state.query.settlementData) {
                this.flag = true,
                this.ruleForm = {
                    ...this.$state.query.settlementData
                }
            }
            // for (let key in this.ruleForm) {
            //     if (!this.ruleForm[key] || this.ruleForm[key] === '' || this.ruleForm[key].length === 0) {
            //         delete this.ruleForm[key]
            //     }
            // }
		},
        mounted() { },
		methods: {
            onSubmit (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let lsData = JSON.parse(localStorage.getItem('settlementData'));
                        if(this.flag){
                            lsData[this.ruleForm.index - 1].safeName = this.ruleForm.safeName;
                            lsData[this.ruleForm.index - 1].bouns = this.ruleForm.bouns;
                            lsData[this.ruleForm.index - 1].totalC = this.ruleForm.totalC;
                            lsData[this.ruleForm.index - 1].telServiceC = this.ruleForm.telServiceC;
                            lsData[this.ruleForm.index - 1].isUse = this.ruleForm.isUse;
                            lsData[this.ruleForm.index - 1].spareField2 = this.ruleForm.spareField2;
                            lsData[this.ruleForm.index - 1].spareField4 = this.ruleForm.spareField4;
                            lsData[this.ruleForm.index - 1].spareField6 = this.ruleForm.spareField6;
                            lsData[this.ruleForm.index - 1].date = this.getDatetime();
                        }else{
                            Object.keys(lsData).map(item => {
                                if(lsData[item].spareField1 && lsData[item].spareField1 != ''){
                                    this.ruleForm.spareField1 = lsData[item].spareField1;
                                }
                                if(lsData[item].spareField3 && lsData[item].spareField3 != ''){
                                    this.ruleForm.spareField3 = lsData[item].spareField3;
                                }
                                if(lsData[item].spareField5 && lsData[item].spareField5 != ''){
                                    this.ruleForm.spareField5 = lsData[item].spareField5;
                                }
                            })
                            this.ruleForm.spareField2 = "-";
                            this.ruleForm.spareField4 = "-";
                            this.ruleForm.spareField6 = "-";
                            this.ruleForm.date = this.getDatetime();
                            this.ruleForm.isUse = this.ruleForm.isUse;
                            this.ruleForm.index = lsData.length + 1;
                            lsData.push(this.ruleForm);
                        }
                        localStorage.setItem('settlementData', JSON.stringify(lsData));
                        this.$message.success('修改成功!')
                        this.$state.query.callback()
                        this.$modal.close()
                    } else {
                        return false;
                    }
                });
            },
            onCancel () {
                this.$modal.close();
            },
            getDatetime() {
                var now = new Date();
                var year = now.getFullYear();       
                var month = now.getMonth() + 1;     
                var day = now.getDate();            
                var hh = now.getHours();            
                var mm = now.getMinutes();          
                var ss = now.getSeconds();          
                var clock = year + "-";
                if (month < 10) clock += "0"; clock += month + "-";
                if (day < 10) clock += "0"; clock += day + " ";
                if (hh < 10) clock += "0";  clock += hh + ":";
                if (mm < 10) clock += '0'; clock += mm + ":";
                if (ss < 10) clock += '0'; clock += ss;
                return clock;
            }
        }
	}
</script>

<style scoped>
    .w180{
        width: 180px;
    }
    .w300{
        width: 300px;
    }
</style>
